<template>
  <div class="test-container">
    <!-- <vab-query-form>
      <vab-query-form-left-panel :span="12">
        <el-button icon="el-icon-plus" type="primary" @click="handleEdit">
          新增
        </el-button>
        <el-button icon="el-icon-delete" type="danger" @click="handleDelete">
          批量删除
        </el-button>
      </vab-query-form-left-panel>
      <vab-query-form-right-panel :span="12">
        <el-form :inline="true" :model="listQuery" @submit.native.prevent>
          <el-form-item>
            <el-input
              v-model.trim="listQuery.username"
              placeholder="请输入用户名"
              clearable
            />
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-search" type="primary" @click="queryData">
              查询
            </el-button>
          </el-form-item>
        </el-form>
      </vab-query-form-right-panel>
    </vab-query-form> -->
    <div class="top-main">
      <search :listQuery="listQuery" :path="$route.name"></search>
    </div>
    <div class="bottom-main">
      <div class="table-list">
        <el-table
          v-loading="listLoading"
          ref="table"
          :data="list"
          :element-loading-text="elementLoadingText"
          @selection-change="setSelectRows"
          highlight-current-row
          height="100%"
          :header-cell-style="{
            'border-bottom': '1px solid #cbcccd',
            'border-top': '1px solid #cbcccd',
          }"
        >
          <el-table-column
            show-overflow-tooltip
            type="selection"
            prop="action"
          ></el-table-column>
          <el-table-column
            show-overflow-tooltip
            label="序号"
            prop="action"
            width="0.5rem"
          >
            <template #default="scope">
              {{
                scope.$index +
                listQuery.pageSize * (listQuery.pageIndex - 1) +
                1
              }}
            </template>
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            prop="churuk"
            label="出入库类型"
          >
            <template #default="{ row }">
              <!-- {{ row.churuk == 1 ? '入库' : '出库' }} -->
              {{ $util.getrzcrk(row.churuk) }}
            </template>
          </el-table-column>
          <!-- 0入库 1出库 -->
          <el-table-column
            show-overflow-tooltip
            prop="guajiam"
            min-width="150"
            align="center"
            label="挂架码"
          ></el-table-column>

          <el-table-column
            show-overflow-tooltip
            prop="huoweih"
            label="货位号"
            width="150"
          ></el-table-column>
          <el-table-column
            show-overflow-tooltip
            prop="tuopanh"
            label="托盘号"
            width="150"
          ></el-table-column>
          <!-- <el-table-column
            show-overflow-tooltip
            prop="guajialx"
            label="挂架类型"
          ></el-table-column> -->
          <el-table-column
            show-overflow-tooltip
            prop="miaoshu"
            label="描述"
          ></el-table-column>
          <el-table-column
            show-overflow-tooltip
            prop="createName"
            label="创建人"
          ></el-table-column>

          <el-table-column
            show-overflow-tooltip
            prop="createTime"
            label="创建时间"
          ></el-table-column>
          <el-table-column
            show-overflow-tooltip
            label="操作"
            fixed="right"
            min-width="50"
          >
            <template #default="{ row }">
              <el-button type="text" @click="handleDelete(row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-pagination
        background
        :current-page="listQuery.pageIndex"
        :page-size="listQuery.pageSize"
        :layout="layout"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      ></el-pagination>
    </div>
    <div style="height: 0">
      <div id="print-content">
        <div class="print-top">
          <h2>出入库流水</h2>
          <p class="print-time">{{ printTime }}</p>
        </div>
        <table
          border="1"
          width="100%"
          align="center"
          cellpadding="0"
          cellspacing="0"
        >
          <thead>
            <tr align="center" valign="center" height="36">
              <td>序号</td>
              <td>流水类型</td>
              <td>单号</td>
              <td>库房名称</td>
              <td>物资名称</td>
              <td>规格型号</td>
              <td>计量单位</td>
              <td>物资代码</td>
              <td>编目码</td>
              <td>物资分类</td>
              <td>物资区分</td>
              <td>主管单位</td>
              <td>数量</td>
              <td>生产厂家</td>
              <td>完成时间</td>
              <td>收/发物单位</td>
            </tr>
          </thead>
          <tbody>
            <tr
              v-for="(item, index) in printlist"
              :key="index"
              align="center"
              valign="center"
              height="36"
            >
              <td>{{ index + 1 }}</td>
              <td>{{ item.liushuilx == 0 ? '入库' : '出库' }}</td>
              <td>{{ item.wuzibm }}</td>
              <td>{{ item.kufangmc }}</td>
              <td>{{ item.wuzimc }}</td>
              <td>{{ item.guigexh }}</td>
              <td>{{ item.jiliangdw }}</td>
              <!-- <td>{{ item.wuzidm }}</td> -->
              <!-- <td>{{ item.zhengshibmm }}</td> -->
              <td>{{ item.wuzizymc }}</td>
              <td>{{ item.wuziqfmc }}</td>
              <td>{{ item.zhuguandwmc }}</td>
              <td>{{ item.shuliang }}</td>
              <td>{{ item.shengchancj }}</td>
              <td>{{ item.aaa }}</td>
              <td>{{ item.aaa }}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <edit ref="edit" @fetch-data="fetchData"></edit>
  </div>
</template>

<script>
  let _listQuery = {
    pageIndex: 1,
    pageSize: 10,
  }
  import search from './components/search.vue'
  import { getList, doDelete } from '@/api/userManagement'
  import Edit from './components/TrayManagementEdit'
  import { queryRz, queryRzOne, Rzdelete } from '@/api/kucun'

  export default {
    name: 'TrayManagement',
    components: { Edit, search },
    data() {
      return {
        listQuery: Object.assign({}, _listQuery),
        list: null,
        listLoading: false,
        layout: 'total, sizes, prev, pager, next, jumper',
        total: 0,
        selectRows: '',
        elementLoadingText: '正在加载...',
        printlist: null,
        printObj: {
          id: 'print-content',
          popTitle: '打印',
          extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>',
          beforeOpenCallback(vue) {
            vue.printLoading = true
          },
          openCallback(vue) {
            vue.printLoading = false
          },
          closeCallback(vue) {
            console.log('关闭了打印工具')
          },
        },
        printTime: '',
        zylist: [],
      }
    },
    async created() {
      this.fetchData()
      this.zylist = await this.$util.getWzzy()
    },
    methods: {
      onExportButtonClick() {
        const ExportJsonExcel = require('js-export-excel')
        const option = {}
        option.fileName = '库存流水'
        // table-columns
        const tableColumns = this.$refs.table.columns
        // 过滤掉操作
        const _columns = tableColumns.filter((f) => f.property != 'action')
        // 表头
        const _columnsSheetHeader = _columns.map((m) => m.label)
        // 表头对应字段
        const _sheetFilter = _columns.map((m) => m.property)
        let newlist = this.list.map((item) => {
          item.liushuilx = item.liushuilx == '1' ? '出库' : '入库'
          return item
        })
        option.datas = [
          {
            sheetData: newlist, //数据源
            sheetFilter: _sheetFilter, //表头过滤字段
            sheetHeader: _columnsSheetHeader, //表头
            columnWidths: _columns.map((m) => m.width), //列宽
          },
        ]
        const toExcel = new ExportJsonExcel(option)
        toExcel.saveExcel() //保存
      },
      setSelectRows(val) {
        this.selectRows = val
      },
      showzyName(id) {
        if (id) {
          let datarow = this.zylist.filter((item) => item.zhuanyeid == id)
          return datarow[0].zhuanyemc
        }
      },
      handleEdit(row) {
        if (row.id) {
          this.$refs['edit'].showEdit(row)
        } else {
          this.$refs['edit'].showEdit()
        }
      },
      handleDelete(row) {
        if (row.id) {
          this.$baseConfirm('你确定要删除当前项吗', null, async () => {
            const { msg } = await Rzdelete({ id: row.id })
            this.$baseMessage(msg, 'success')
            this.fetchData()
          })
        } else {
          if (this.selectRows.length > 0) {
            const ids = this.selectRows.map((item) => item.id).join()
            this.$baseConfirm('你确定要删除选中项吗', null, async () => {
              const { msg } = await doDelete({ ids })
              this.$baseMessage(msg, 'success')
              this.fetchData()
            })
          } else {
            this.$baseMessage('未选中任何行', 'error')
            return false
          }
        }
      },
      handleSizeChange(val) {
        this.listQuery.pageSize = val
        this.fetchData()
      },
      handleCurrentChange(val) {
        this.listQuery.pageIndex = val
        this.fetchData()
      },
      queryData() {
        this.listQuery.pageIndex = 1
        this.fetchData()
      },
      async fetchData() {
        const res = await queryRz(this.listQuery)
        this.list = res.data.rows
        this.total = res.data.total
      },
      search() {
        //搜索
        this.listQuery.pageIndex = 1
        this.fetchData()
      },
      resetlist() {
        //重置
        this.listQuery = Object.assign({}, _listQuery)
        this.fetchData()
      },
      print() {
        let time = new Date()
        this.printTime = time.toLocaleString()
        this.printlist =
          this.selectRows.length > 0 ? this.selectRows : this.list
      },
    },
  }
</script>
<style lang="scss" scoped>
  .test-container {
    display: flex;
    flex-direction: column;
    padding: 0 !important;
    background: #f6f8f9 !important;
    height: 100%;

    .top-main {
      width: 100%;
      background: #fff;
      padding: 10px 0;
    }

    .bottom-main {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      flex: 1;
      background-color: #fff;
      margin-top: 10px;
      padding-bottom: 10px;

      .list-button-group {
        display: flex;
        flex-direction: row;
        padding: 20px;

        .button-item {
          padding: 0px 10px;
        }

        .button-item:first-child,
        &:last-child {
          padding: 0px 10px 0 0;
        }
      }

      .table-list {
        flex: 1;
        padding: 0 20px 20px;
      }
    }

    .el-button {
      font-size: 0.14rem !important;
    }
  }

  #print-content {
    padding: 20px;

    .print-top {
      text-align: center;

      h2 {
        text-decoration: underline;
        margin: 0 !important;
      }
    }

    .print-time {
      float: right;
      color: #000;
      font-size: 16px;
    }

    table {
      font-size: 14px;
      background-color: #f0f2f5;
      border-collapse: collapse;
      color: #454545;
      table-layout: auto;
      width: 100%;
      text-align: center;
      border-bottom-width: 1px;
      border-bottom-style: solid;
      border-bottom-color: #dadcde;

      thead {
        border-top-width: 1px;
        border-top-style: solid;
        border-top-color: #dadcde;
        line-height: 40px;
        font-weight: bold;
        color: #454c70;
      }

      tr {
        border-top-width: 1px;
        border-top-style: solid;
        border-top-color: #dadcde;
        line-height: 23px;
      }

      td {
        padding: 5px;
        font-size: 14px;
        width: 100px;
        word-break: break-all; // 元素换行
      }

      // // 斑马纹效果stripe
      // tr:nth-child(even) {
      //   background: #F5F7F9;
      // }

      // tr:nth-child(odd) {
      //   background: #FFF;
      // }
    }
  }
</style>
